<template>
  <div class="thickness-judge-container">
    <!-- 搜索区域 -->
    <div class="search-panel">
      <!-- Search Row 1 -->
      <div class="search-row">
        <div class="search-item">
          <span class="label">时间</span>
          <el-date-picker v-model="searchParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" class="custom-date-picker" size="small"/>
        </div>
        <div class="search-item range-item">
          <span class="label">产品厚度</span>
          <el-input v-model="searchParams.prodThicknessMin" placeholder="最小值" class="range-input" size="small" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.prodThicknessMax" placeholder="最大值" class="range-input" size="small" />
        </div>
        <div class="search-item range-item">
          <span class="label">原料宽度</span>
          <el-input v-model="searchParams.materialWidthMin" placeholder="最小值" class="range-input" size="small" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.materialWidthMax" placeholder="最大值" class="range-input" size="small" />
        </div>
        <div class="search-item range-item">
          <span class="label">原料厚度</span>
          <el-input v-model="searchParams.materialThicknessMin" placeholder="最小值" class="range-input" size="small" />
          <span class="separator">-</span>
          <el-input v-model="searchParams.materialThicknessMax" placeholder="最大值" class="range-input" size="small" />
        </div>
        <div class="search-item">
          <span class="label">钢种</span>
          <el-select v-model="searchParams.steelGrade" placeholder="请选择" clearable class="custom-select" size="small"
            style="width: 120px;">
            <el-option label="SPHC-LT" value="SPHC-LT" />
            <el-option label="SPHC-H" value="SPHC-H" />
            <el-option label="Q235B" value="Q235B" />
          </el-select>
        </div>
      </div>
      <!-- Search Row 2 -->
      <div class="search-row">
        <div class="search-item">
          <span class="label">冷轧号</span>
          <el-input v-model="searchParams.coldRollNo" placeholder="请输入" class="custom-input" size="small" />
        </div>
        <div class="search-item">
          <span class="label">热轧号</span>
          <el-input v-model="searchParams.hotRollNo" placeholder="请输入" class="custom-input" size="small" />
        </div>
        <div class="search-item">
          <span class="label">异常筛选</span>
          <el-select v-model="searchParams.abnormalFilter" placeholder="请选择" clearable class="custom-select" size="small">
            <el-option label="是" value="yes" />
            <el-option label="否" value="no" />
          </el-select>
        </div>
        <div class="search-actions">
          <button class="btn query-btn" @click="handleSearch">查询</button>
          <button class="btn reset-btn" @click="handleReset">重置</button>
          <button class="btn export-btn">导出</button>
        </div>
      </div>
    </div>

    <!-- 主内容区域 (可上下拖动调整) -->
    <div class="main-content">
      <!-- 顶部面板：表格 + 分页 -->
      <div class="top-panel" ref="topPanelRef">
        <div class="table-container">
          <el-table
            :data="tableData" 
            style="width: 100%;"
            height="100%"
            border
            highlight-current-row
            :row-class-name="tableRowClassName"
            :cell-class-name="tableCellClassName"
            @row-click="selectRow"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column type="index" label="序号" width="60" align="center" fixed="left" />
            <el-table-column prop="coldRollNo" label="冷轧号" width="120" align="center" />
            <el-table-column prop="hotRollNo" label="热轧号" width="120" align="center" />
            <el-table-column prop="steelGrade" label="钢种" width="100" align="center" />
            <el-table-column prop="prodThickness" label="产品厚度[mm]" width="110" align="center" />
            <el-table-column prop="prodWidth" label="产品宽度[mm]" width="110" align="center" />
            <el-table-column label="超差绝对长度[m]" align="center">
              <el-table-column prop="devHead" label="头部" width="70" align="center" />
              <el-table-column prop="devMid" label="中部" width="70" align="center" />
              <el-table-column prop="devTail" label="尾部" width="70" align="center" />
            </el-table-column>
            <el-table-column prop="materialThickness" label="原料厚度[mm]" width="110" align="center" />
            <el-table-column prop="materialWidth" label="原料宽度[mm]" width="110" align="center" />
            <el-table-column prop="rollCount" label="卷" width="60" align="center" />
            <el-table-column prop="newCol1" label="新列1" width="100" align="center" />
            <el-table-column prop="newCol2" label="新列2" width="100" align="center" />
            <el-table-column label="详情" width="160" fixed="right" align="center">
              <template #default="scope">
                <button class="action-btn rate-btn">评级</button>
                <button class="action-btn analysis-btn">厚度质量分析</button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
              background
              size="small"
            />
        </div>
      </div>

      <!-- 分隔条 -->
      <div class="splitter" @mousedown="startDrag"></div>

      <!-- 底部面板：详情区域 -->
      <div class="bottom-panel" v-if="selectedRow">
        <div class="detail-grid">
          <!-- 统计结果 -->
          <div class="detail-card stats-card">
            <div class="detail-header">统计结果</div>
            <div class="detail-content stats-table-wrapper">
              <el-table
                :data="formattedStatsData"
                style="width: 100%;"
                height="100%"
                border
                size="small"
                :header-cell-style="statsTableHeaderStyle"
                :cell-style="statsTableCellStyle"
              >
                <el-table-column prop="type" label="" width="70" align="center" :cell-style="{ fontWeight: 'bold' }" />
                <el-table-column prop="headMaxDev" label="头部超差最大值[mm]" min-width="150" align="center" />
                <el-table-column prop="headMinDev" label="头部超差最小值[mm]" min-width="150" align="center" />
                <el-table-column prop="tailMaxDev" label="尾部超差最大值[mm]" min-width="150" align="center" />
                <el-table-column prop="tailMinDev" label="尾部超差最小值[mm]" min-width="150" align="center" />
                <el-table-column prop="headTotalLength" label="头尾超差总长度[m]" min-width="150" align="center" />
                <el-table-column prop="headAvgLength" label="头尾超差平均长度[m]" min-width="150" align="center" />
                <el-table-column prop="tailTotalLength" label="尾部超差总长度[m]" min-width="150" align="center" />
                <el-table-column prop="tailAvgLength" label="尾部超差平均长度[m]" min-width="150" align="center" />
              </el-table>
            </div>
          </div>

          <!-- 厚度头尾超差趋势 -->
          <div class="detail-card chart-card">
            <div class="detail-header">厚度头尾超差趋势</div>
            <div class="detail-content chart-wrapper">
              <div class="legend">
                <span class="legend-item"><span class="color-box head-max"></span>头部超差最大值</span>
                <span class="legend-item"><span class="color-box tail-max"></span>尾部超差最大值</span>
              </div>
              <div class="chart-instance" ref="trendChartRef"></div>
            </div>
          </div>

          <!-- 单卷厚度等级分布图 -->
          <div class="detail-card chart-card">
            <div class="detail-header">单卷厚度等级分布图</div>
            <div class="detail-content chart-wrapper">
               <div class="chart-description">厚度等级</div>
               <div class="chart-instance" ref="distributionChartRef"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部面板占位符 (当未选择行时) -->
      <div class="bottom-panel-placeholder" v-else></div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import type { TableColumnCtx } from 'element-plus';
// --- ECharts Imports ---
import * as echarts from 'echarts/core';
import {
  LineChart,
  BarChart
} from 'echarts/charts';
import {
  TooltipComponent,
  GridComponent,
  LegendComponent // Keep legend component if charts use it internally (like trend chart)
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';

// Register ECharts components
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  BarChart,
  CanvasRenderer
]);

// --- Refs for DOM elements ---
const topPanelRef = ref<HTMLDivElement | null>(null);
const trendChartRef = ref<HTMLElement | null>(null);
const distributionChartRef = ref<HTMLElement | null>(null);

// --- ECharts Instances ---
let trendChartInstance: echarts.ECharts | null = null;
let distributionChartInstance: echarts.ECharts | null = null;

// --- State for dragging ---
const isDragging = ref(false);
const startY = ref(0);
const initialTopHeight = ref(0);

// --- Search Params ---
const searchParams = reactive({
  dateRange: [],
  prodThicknessMin: '',
  prodThicknessMax: '',
  materialWidthMin: '',
  materialWidthMax: '',
  materialThicknessMin: '',
  materialThicknessMax: '',
  steelGrade: '',
  coldRollNo: '',
  hotRollNo: '',
  abnormalFilter: ''
});

// --- Table Data ---
interface TableRow {
  id: number;
  coldRollNo: string;
  hotRollNo: string;
  steelGrade: string;
  prodThickness: string;
  prodWidth: string;
  devHead: number;
  devMid: number;
  devTail: number;
  materialThickness: string;
  materialWidth: string;
  rollCount: number;
  newCol1: string;
  newCol2: string;
}
const tableData = ref<TableRow[]>(
  Array.from({ length: 15 }, (_, i) => ({
    id: i + 1,
    coldRollNo: `L1250173${100 + i}`,
    hotRollNo: `2251${129400 + i * 10}`,
    steelGrade: i % 3 === 0 ? 'SPHE-H' : 'SPHC-LT',
    prodThickness: (0.35 + Math.random() * 0.05).toFixed(3),
    prodWidth: `${1190 + Math.floor(Math.random() * 15)}`,
    devHead: Math.floor(Math.random() * 25),
    devMid: Math.floor(Math.random() * 5),
    devTail: Math.floor(Math.random() * 5),
    materialThickness: (2.9 + Math.random() * 0.1).toFixed(3),
    materialWidth: `${1200 + Math.floor(Math.random() * 10)}`,
    rollCount: 45 + Math.floor(Math.random() * 10),
    newCol1: `Data A${i + 1}`,
    newCol2: `Data B${i + 1}`
  }))
);

// --- Selected Row --- 
const selectedRow = ref<TableRow | null>(null);

// --- Pagination --- 
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: tableData.value.length // Should be updated based on actual data length from API
});

// --- Statistics Data --- 
const formattedStatsData = computed(() => {
  if (!selectedRow.value) return [];
  // Replace with actual calculations based on selectedRow or fetched detail data
  const staticValues = {
    headMaxDev: (0.45 + Math.random() * 0.05).toFixed(3),
    headMinDev: (0.40 + Math.random() * 0.03).toFixed(3),
    tailMaxDev: (0.45 + Math.random() * 0.05).toFixed(3),
    tailMinDev: (0.40 + Math.random() * 0.03).toFixed(3),
    headTotalLength: `${Math.floor(Math.random() * 100)}`,
    headAvgLength: (Math.random() * 10).toFixed(2),
    tailTotalLength: `${Math.floor(Math.random() * 20)}`,
    tailAvgLength: (Math.random() * 2).toFixed(2),
  };

  return [
    {
      type: '值',
      ...staticValues
    },
    {
      type: '对应卷号',
      headMaxDev: selectedRow.value.coldRollNo,
      headMinDev: selectedRow.value.coldRollNo,
      tailMaxDev: selectedRow.value.coldRollNo,
      tailMinDev: selectedRow.value.coldRollNo,
      headTotalLength: '-', headAvgLength: '-', tailTotalLength: '-', tailAvgLength: '-'
    },
    {
      type: '热轧号',
      headMaxDev: selectedRow.value.hotRollNo,
      headMinDev: selectedRow.value.hotRollNo,
      tailMaxDev: selectedRow.value.hotRollNo,
      tailMinDev: selectedRow.value.hotRollNo,
      headTotalLength: '-', headAvgLength: '-', tailTotalLength: '-', tailAvgLength: '-'
    }
  ];
});

// --- Chart Options ---
// Trend Chart Option
const trendChartOption = {
  backgroundColor: 'transparent',
  tooltip: { trigger: 'axis', backgroundColor: 'rgba(10, 26, 58, 0.8)', borderColor: '#3a5a8a', textStyle: { color: '#c0c4cc' } },
  grid: { left: '10%', right: '5%', bottom: '15%', top: '12%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: Array.from({ length: 10 }, (_, i) => `${i * 100}m`), // Sample length points
    axisLine: { lineStyle: { color: '#3a5a8a' } },
    axisLabel: { color: '#c0c4cc', fontSize: 10 }
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: '#c0c4cc', fontSize: 10, formatter: '{value} mm' },
    splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
    axisLine: { lineStyle: { color: '#3a5a8a' } }
  },
  series: [
    {
      name: '头部超差最大值',
      type: 'line',
      smooth: true,
      symbol: 'none',
      itemStyle: { color: '#67c23a' }, // Green
      lineStyle: { width: 2 },
      // Generate random data dynamically based on selected row for simulation
      data: Array.from({ length: 10 }, () => (0.45 + Math.random() * 0.1).toFixed(3))
    },
    {
      name: '尾部超差最大值',
      type: 'line',
      smooth: true,
      symbol: 'none',
      itemStyle: { color: '#e6a23c' }, // Yellow
      lineStyle: { width: 2 },
      data: Array.from({ length: 10 }, () => (0.40 + Math.random() * 0.1).toFixed(3))
    }
  ]
};

// Distribution Chart Option
const distributionChartOption = {
  backgroundColor: 'transparent',
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: 'rgba(10, 26, 58, 0.8)', borderColor: '#3a5a8a', textStyle: { color: '#c0c4cc' } },
  grid: { left: '10%', right: '5%', bottom: '15%', top: '12%', containLabel: true },
  xAxis: {
    type: 'category',
    data: ['A级', 'B级', 'C级', 'D级'],
    axisLine: { lineStyle: { color: '#3a5a8a' } },
    axisLabel: { color: '#c0c4cc', fontSize: 10 },
    axisTick: { alignWithLabel: true }
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: '#c0c4cc', fontSize: 10, formatter: '{value} %' },
    splitLine: { lineStyle: { color: 'rgba(58, 90, 138, 0.3)' } },
    axisLine: { lineStyle: { color: '#3a5a8a' } }
  },
  series: [
    {
      name: '比例',
      type: 'bar',
      barWidth: '50%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#2979ff' },
          { offset: 1, color: '#1c2d5a' }
        ]),
         borderRadius: [3, 3, 0, 0]
      },
      // Generate random data dynamically
      data: [Math.floor(Math.random()*70+20), Math.floor(Math.random()*20+5), Math.floor(Math.random()*10), Math.floor(Math.random()*5)]
    }
  ]
};

// --- Event Handlers ---
const handleSearch = () => {
  console.log('查询参数:', searchParams);
  // Add actual search logic here, update tableData and pagination.total
};

const handleReset = () => {
  Object.keys(searchParams).forEach(key => {
    const typedKey = key as keyof typeof searchParams;
    if (typedKey === 'dateRange') searchParams[typedKey] = [];
    else searchParams[typedKey] = '';
  });
  console.log('重置参数');
  // Optionally re-fetch initial data
};

const selectRow = (row: TableRow) => {
  if (selectedRow.value?.id === row.id) {
    selectedRow.value = null; // Deselect if clicking the same row
  } else {
    selectedRow.value = row;
  }
  console.log('选中行:', selectedRow.value);
};

// --- ECharts Logic ---
const initOrUpdateCharts = () => {
  console.log("Init/Update charts called. Selected Row:", !!selectedRow.value);
  if (!selectedRow.value) return; // Should not happen if called from watch correctly

  try {
    // Trend Chart
    if (trendChartRef.value) {
      if (!trendChartInstance) {
        console.log("Initializing Trend Chart");
        trendChartInstance = echarts.init(trendChartRef.value);
        window.addEventListener('resize', resizeCharts); // Add listener only when chart exists
      }
      // Update options with potentially new (random) data
      trendChartOption.series[0].data = Array.from({ length: 10 }, () => (0.45 + Math.random() * 0.1).toFixed(3));
      trendChartOption.series[1].data = Array.from({ length: 10 }, () => (0.40 + Math.random() * 0.1).toFixed(3));
      trendChartInstance.setOption(trendChartOption, true); // Use true for notMerge
    } else {
      console.warn("Trend Chart Ref not found during init/update!");
    }

    // Distribution Chart
    if (distributionChartRef.value) {
      if (!distributionChartInstance) {
        console.log("Initializing Distribution Chart");
        distributionChartInstance = echarts.init(distributionChartRef.value);
        // Resize listener already added by trend chart
      }
      distributionChartOption.series[0].data = [Math.floor(Math.random()*70+20), Math.floor(Math.random()*20+5), Math.floor(Math.random()*10), Math.floor(Math.random()*5)];
      distributionChartInstance.setOption(distributionChartOption, true); // Use true for notMerge
    } else {
      console.warn("Distribution Chart Ref not found during init/update!");
    }
  } catch (error) {
    console.error("图表初始化/更新失败:", error);
  }
};

const disposeCharts = () => {
  console.log("Disposing charts...");
  window.removeEventListener('resize', resizeCharts); // Remove listener
  trendChartInstance?.dispose();
  distributionChartInstance?.dispose();
  trendChartInstance = null;
  distributionChartInstance = null;
};

const resizeCharts = () => {
  console.log("Resizing charts...");
  trendChartInstance?.resize();
  distributionChartInstance?.resize();
};

// --- Watcher for Selected Row ---
watch(selectedRow, (newRow, oldRow) => {
  if (newRow) {
    console.log("Watcher: Row selected, initializing/updating charts soon...");
    nextTick(() => {
      initOrUpdateCharts();
    });
  } else {
    console.log("Watcher: Row deselected, disposing charts...");
    disposeCharts();
  }
});

// --- Dragging Logic ---
const startDrag = (event: MouseEvent) => {
  if (!topPanelRef.value) return;
  isDragging.value = true;
  startY.value = event.clientY;
  initialTopHeight.value = topPanelRef.value.offsetHeight;
  document.body.style.cursor = 'row-resize';
  document.body.style.userSelect = 'none';
  window.addEventListener('mousemove', doDrag);
  window.addEventListener('mouseup', stopDrag);
};

const doDrag = (event: MouseEvent) => {
  if (!isDragging.value || !topPanelRef.value) return;
  const deltaY = event.clientY - startY.value;
  let newHeight = initialTopHeight.value + deltaY;

  const container = topPanelRef.value.parentElement as HTMLElement;
  const containerHeight = container ? container.offsetHeight : window.innerHeight;
  const splitterHeight = 8; // Splitter height
  const minPanelHeight = 150; // Min height for top and bottom panels

  const maxTopHeight = containerHeight - splitterHeight - minPanelHeight;

  if (newHeight < minPanelHeight) newHeight = minPanelHeight;
  if (newHeight > maxTopHeight) newHeight = maxTopHeight;

  topPanelRef.value.style.height = `${newHeight}px`;
};

const stopDrag = () => {
  if (!isDragging.value) return;
  isDragging.value = false;
  document.body.style.cursor = '';
  document.body.style.userSelect = '';
  window.removeEventListener('mousemove', doDrag);
  window.removeEventListener('mouseup', stopDrag);
};

// --- ElTable Style Definitions ---
const tableHeaderStyle = { background: '#183272', color: '#b8e8ff', padding: '6px 0', textAlign: 'center', fontWeight: 'normal', borderBottom: '1px solid #06279d' };
const tableCellStyle = { padding: '6px 0', textAlign: 'center', color: '#c0c4cc', borderBottom: '1px solid #06279d', borderRight: '1px solid #06279d', fontSize: '12px' };
const statsTableHeaderStyle = { background: '#0f2142', color: '#b8e8ff', padding: '5px 0', textAlign: 'center', fontWeight: 'normal', border: '1px solid #3a5a8a' }; 
const statsTableCellStyle = { background: '#0f2142', color: '#c0c4cc', padding: '5px 0', textAlign: 'center', border: '1px solid #3a5a8a', fontSize: '12px' };

// --- ElTable Class Helpers ---
const tableRowClassName = ({ row }: { row: TableRow }) => (selectedRow.value?.id === row.id ? 'selected-row' : '');
const tableCellClassName = ({ row, column }: CellClassNameParams) => {
  if (column.property === 'devHead' && row.devHead > 10) return 'red-text';
  if (column.property === 'devMid' && row.devMid > 5) return 'red-text';
  if (column.property === 'devTail' && row.devTail > 5) return 'red-text';
  return '';
};
interface CellClassNameParams {
  row: TableRow;
  column: TableColumnCtx<TableRow>;
  rowIndex: number;
  columnIndex: number;
}

// --- Lifecycle Hooks ---
onMounted(() => {
  // Add resize listener for charts (only if/when they are initialized)
});

onUnmounted(() => {
  disposeCharts(); // Ensure cleanup on unmount
  // Clean up drag listeners
  window.removeEventListener('mousemove', doDrag);
  window.removeEventListener('mouseup', stopDrag);
});

</script>

<style scoped>
/* --- Container & Base --- */
.thickness-judge-container {
  background-color: #0a1a3a; 
  color: #c0c4cc; 
  padding: 15px;
  height: 100vh; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

/* --- Search Panel --- */
.search-panel {
  background-color: #1c2d5a; 
  padding: 10px 15px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-bottom: 10px; 
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}
.search-row:last-child { margin-bottom: 0; }
.search-item { display: flex; align-items: center; margin-right: 15px; margin-bottom: 5px; }
.label { color: #c0c4cc; margin-right: 6px; white-space: nowrap; min-width: 55px; text-align: right; font-size: 12px; }
.range-item .label { min-width: 60px; }
.range-input { width: 75px; }
.separator { margin: 0 4px; color: #c0c4cc; }
.custom-input { width: 130px; }
.custom-select { width: 110px; }
.search-actions { margin-left: auto; display: flex; align-items: center; }

/* Buttons */
.btn {
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  color: #fff;
  transition: background-color 0.2s ease;
}
.query-btn { background-color: #2979ff; }
.query-btn:hover { background-color: #5393ff; }
.reset-btn { background-color: #5a7aa4; }
.reset-btn:hover { background-color: #7a9ac4; }
.export-btn { background-color: #67c23a; }
.export-btn:hover { background-color: #85ce61; }

/* Element Plus Overrides (Size Small) */
:deep(.el-input--small .el-input__wrapper), 
:deep(.el-select--small .el-select__wrapper), 
:deep(.el-date-editor--small.el-input__wrapper) {
  height: 28px;
  line-height: 28px;
  background-color: #0a1a3a !important;
  border: 1px solid #3a5a8a !important;
  border-radius: 3px !important;
  color: #c0c4cc !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
:deep(.el-input--small .el-input__inner), 
:deep(.el-select--small .el-select__selected-item span), 
:deep(.el-date-editor--small .el-range-input), 
:deep(.el-date-editor--small .el-range-separator) {
  height: 26px !important;
  line-height: 26px !important;
  font-size: 12px !important;
  color: #c0c4cc !important;
}
:deep(.el-date-editor--small .el-range-separator) { padding: 0; }
:deep(.el-input--small .el-input__icon), 
:deep(.el-select--small .el-select__caret), 
:deep(.el-date-editor--small .el-input__icon) {
  line-height: 28px;
  color: #c0c4cc;
}
:deep(.range-input .el-input__wrapper) { padding-left: 8px; padding-right: 8px; }
:deep(.el-select-dropdown__item) { font-size: 12px; }

/* --- Main Content Area --- */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrollbars on main content */
}

/* --- Top Panel (Table + Pagination) --- */
.top-panel {
  display: flex;
  flex-direction: column;
  height: 60%; /* Initial height */
  min-height: 200px; /* Min height */
  overflow: hidden;
}
.table-container {
  flex-grow: 1;
  overflow: auto; /* Allow table itself to scroll */
  min-height: 0;
}
.pagination-container {
  flex-shrink: 0;
  background-color: #1c2d5a; 
  padding: 5px 10px;
  border-top: 1px solid #3a5a8a; 
  display: flex;
  justify-content: flex-end;
}

/* --- Splitter --- */
.splitter {
  height: 8px;
  background-color: #3a5a8a;
  cursor: row-resize;
  flex-shrink: 0;
  border-top: 1px solid #5a7aa4;
  border-bottom: 1px solid #5a7aa4;
}
.splitter:hover { background-color: #5a7aa4; }

/* --- Bottom Panel (Details) --- */
.bottom-panel {
  flex-grow: 1; 
  min-height: 200px; /* Min height */
  overflow: auto; /* Allow detail panel to scroll if content overflows */
  padding: 10px; 
  background-color: #0a1a3a; /* Match overall background */
}
.bottom-panel-placeholder {
  flex-grow: 1;
  min-height: 50px; /* Smaller placeholder when details hidden */
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%; /* Try to fill parent */
}
.detail-card {
  background-color: #1c2d5a;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.detail-header {
  background-color: #2979ff; 
  color: #fff;
  padding: 6px 12px;
  font-weight: bold;
  font-size: 13px;
  flex-shrink: 0;
}
.detail-content {
  padding: 10px;
  flex-grow: 1;
  overflow: auto; /* Allow content within card to scroll if needed */
  min-height: 0;
}
.stats-table-wrapper { padding: 0; height: 100%; } /* Remove padding for table */
.chart-wrapper { display: flex; flex-direction: column; height: 100%; padding: 8px;} /* Chart wrapper needs flex */
.chart-card .detail-content { padding: 0; } /* Remove padding if chart wrapper handles it */

/* Chart Specific Styles */
.chart-wrapper .legend { margin-bottom: 5px; text-align: center; flex-shrink: 0; margin-top: 5px;}
.chart-wrapper .legend-item { display: inline-flex; align-items: center; margin: 0 8px; color: #c0c4cc; font-size: 11px;}
.chart-wrapper .color-box { width: 10px; height: 10px; margin-right: 4px; display: inline-block; }
.chart-wrapper .head-max { background-color: #67c23a; }
.chart-wrapper .tail-max { background-color: #e6a23c; }
.chart-wrapper .chart-description { margin-bottom: 5px; color: #a0c4cc; text-align: center; flex-shrink: 0; font-size: 11px;}
.chart-instance {
  width: 100%;
  flex-grow: 1; 
  min-height: 150px; /* Adjusted min-height */
}

/* --- ElTable Styles (Main Table) --- */
:deep(.el-table) {
  background-color: transparent !important;
  border: none !important;
}
:deep(.el-table thead) { color: #b8e8ff; }
:deep(.el-table th.el-table__cell) { background-color: #183272 !important; border-bottom: 1px solid #06279d !important; color: #b8e8ff; padding: 6px 0 !important; }
:deep(.el-table td.el-table__cell) { padding: 6px 0 !important; border-color: #06279d !important; color: #c0c4cc; font-size: 12px; }
:deep(.el-table tr) { background-color: transparent !important; }
:deep(.el-table tr:nth-child(odd) td.el-table__cell) { background-color: #0f2142 !important; }
:deep(.el-table tr:nth-child(even) td.el-table__cell) { background-color: #142a52 !important; }
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) { background-color: rgba(41, 121, 255, 0.2) !important; }
:deep(.el-table__body tr.current-row > td.el-table__cell),
:deep(.el-table__body tr.selected-row > td.el-table__cell) { background-color: rgba(41, 121, 255, 0.3) !important; }
/* Fixed columns specific background */
:deep(.el-table__body tr td.el-table-fixed-column--right), 
:deep(.el-table__body tr:nth-child(odd) td.el-table-fixed-column--right) { background-color: #0f2142 !important; }
:deep(.el-table__body tr:nth-child(even) td.el-table-fixed-column--right) { background-color: #142a52 !important; }
:deep(.el-table__body tr.current-row > td.el-table-fixed-column--right),
:deep(.el-table__body tr.selected-row > td.el-table-fixed-column--right) { background-color: rgba(41, 121, 255, 0.3) !important; } 
/* Borders */
:deep(.el-table--border .el-table__inner-wrapper::after), 
:deep(.el-table--border::after), 
:deep(.el-table--border::before), 
:deep(.el-table__border-left-patch), 
:deep(.el-table--border .el-table__inner-wrapper::before) { background-color: #06279d !important; }
:deep(.el-table td.el-table__cell), 
:deep(.el-table th.el-table__cell.is-leaf) { border-bottom: 1px solid #06279d !important; }
:deep(.el-table--border td.el-table__cell), 
:deep(.el-table--border th.el-table__cell) { border-right: 1px solid #06279d !important; }
/* Scrollbar */
:deep(.el-table__body-wrapper) { scrollbar-width: thin; scrollbar-color: #3a5a8a #142a52; }
:deep(.el-table__body-wrapper::-webkit-scrollbar) { width: 6px; height: 6px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) { background: #142a52; border-radius: 3px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) { background-color: #3a5a8a; border-radius: 3px; }
/* Text Highlighting */
.red-text { color: #ff4d4f; font-weight: bold; }
:deep(.el-table__cell.red-text) { color: #ff4d4f; font-weight: bold; }
/* Action Buttons in Table */
.action-btn { padding: 3px 6px; font-size: 11px; margin: 0 2px; border-radius: 2px; }
.rate-btn { background-color: #e6a23c; }
.rate-btn:hover { background-color: #ebb563; }
.analysis-btn { background-color: #67c23a; }
.analysis-btn:hover { background-color: #85ce61; }

/* --- ElPagination Styles --- */
:deep(.el-pagination) { /* Applied within .pagination-container */
  padding: 0;
  --el-pagination-bg-color: #0a1a3a;
  --el-pagination-text-color: #c0c4cc;
  --el-pagination-button-disabled-bg-color: #183153;
  --el-pagination-button-color: #c0c4cc;
  --el-pagination-button-disabled-color: #6c757d;
  --el-pagination-hover-color: #5393ff;
  --el-color-primary: #2979ff;
}
:deep(.el-pagination button), 
:deep(.el-pager li) { border: 1px solid #3a5a8a; background-color: var(--el-pagination-bg-color); color: var(--el-pagination-button-color); min-width: 24px; height: 24px; font-size: 12px; border-radius: 3px; margin: 0 2px; }
:deep(.el-pager li.is-active) { background-color: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
:deep(.el-pagination button:disabled) { background-color: var(--el-pagination-button-disabled-bg-color); color: var(--el-pagination-button-disabled-color); border-color: #3a5a8a; opacity: 0.7; }
:deep(.el-pagination button:not(:disabled):hover), 
:deep(.el-pager li:hover) { color: var(--el-pagination-hover-color); border-color: var(--el-pagination-hover-color); }
:deep(.el-pagination__total) { color: var(--el-pagination-text-color); margin-right: 10px; font-size: 12px; }
:deep(.el-pagination__sizes .el-select .el-input__wrapper) { height: 24px; background-color: #0a1a3a !important; border: 1px solid #3a5a8a !important; width: 90px; }
:deep(.el-pagination__sizes .el-select .el-input__inner) { height: 22px !important; line-height: 22px !important; font-size: 12px !important; color: #c0c4cc !important; }
:deep(.el-pagination__jump) { color: var(--el-pagination-text-color); margin-left: 10px; font-size: 12px; }
:deep(.el-pagination__jump .el-input__wrapper) { height: 24px; background-color: #0a1a3a !important; border: 1px solid #3a5a8a !important; width: 35px; font-size: 12px !important; }
:deep(.el-pagination__jump .el-input__inner) { height: 22px !important; line-height: 22px !important; font-size: 12px !important; color: #c0c4cc !important; text-align: center; }

/* --- Statistics Table Styles --- */
:deep(.stats-table-wrapper .el-table) { /* More specific selector */
  --el-table-border-color: #3a5a8a; 
  --el-table-header-bg-color: #0f2142;
  --el-table-header-text-color: #b8e8ff; /* Header text slightly brighter */
  --el-table-tr-bg-color: #0f2142;
  --el-table-row-hover-bg-color: #183153;
  --el-table-text-color: #c0c4cc;
  border: 1px solid #3a5a8a !important; /* Ensure outer border */
}
:deep(.stats-table-wrapper .el-table th.el-table__cell) { 
  background-color: var(--el-table-header-bg-color) !important; 
  color: var(--el-table-header-text-color) !important;
  border-color: #3a5a8a !important;
  padding: 5px 0 !important;
}
:deep(.stats-table-wrapper .el-table td.el-table__cell) { 
  background-color: var(--el-table-tr-bg-color) !important; 
  border-color: #3a5a8a !important;
  color: var(--el-table-text-color) !important;
  padding: 5px 0 !important;
}
:deep(.stats-table-wrapper .el-table .el-table__cell) {
   border-right: 1px solid #3a5a8a; /* Add right border */
}
:deep(.stats-table-wrapper .el-table .el-table__cell:last-child) {
   border-right: none; /* Remove last right border */
}

</style>